<template>
    <div class="pay-wrap">
        <div class="shop-box">
            <image
                class="box-img"
                src="https://img2.baidu.com/it/u=1455700025,293351683&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                mode="aspectFill"
            />
            <div class="shop-name">店铺名称</div>
        </div>
        <div class="box-money">
            <span class="symbol">¥</span>
            <input v-model="money" placeholder="请输入金额"  />
        </div>
        <div class="confirm-pay" @click="handleConfirmPay">确认支付</div>
    </div>
</template>
<script setup lang="ts">
// 付款
const money: unknown = null
const handleInputMoney = (): void => {}
const handleConfirmPay=()=>{
    uni.navigateTo({
        url:'/mainPages/paymentTip/index'
    })
}
</script>

<style scoped lang="scss">
.pay-wrap {
    width: 100%;
    min-height: 100vh;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    background: rgb(245, 245, 245);
    .shop-box {
        width: 100%;
        height: 120px;
        // background: red;
        display: flex;
        align-items: center;

        .box-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
        }
        .shop-name {
            margin-left: 10px;
        }
    }
    .box-money {
        margin-top: 10px;
        background: #fff;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-radius: 8px;
        height: 80px;
        .symbol {
            color: rgb(243, 162, 127);
            margin-right: 10px;
        }
    }
    .confirm-pay {
        background: rgb(236, 106, 45);
        margin-top: 30px;
        height: 42px;
        text-align: center;
        color: #fff;
        position: fixed;
        bottom: 43px;
        width: 355px;
        line-height: 42px;
        border-radius: 25px;
    }
}
</style>
